<template>
  <!-- 点菜 -->
  <div class="FoodsData" v-if="index === 0">
    <TreeSelect v-model:main-active-index="activeIndex" :items="variety">
      <template #content>
        <!-- 热销套餐 -->
        <div class="foods" v-for="(item, index) in variety[activeIndex].children" :key="index">
          <img :src="item.pic" alt="" />
          <!-- 右侧信息 -->
          <div class="foods-info">
            <h2>{{ item.title }}</h2>
            <span>人均：￥{{ item.price }}</span>
            <!-- 步进器 -->
            <Stepper v-model="item.num" min="0" max="5" theme="round" button-size="22" disable-input @plus="AddVariety(item)"></Stepper>
            <div class="foods-tag">
              <!-- 标签 -->
            </div>
          </div>
        </div>
      </template>
    </TreeSelect>
  </div>

  <!-- 评价 -->
  <div class="evaluate" v-else-if="index === 1">{{ FoodsData.content }}</div>
  <!-- 商家 -->
  <div class="business" v-else-if="index === 2">{{ FoodsData.content }}</div>
</template>

<script>
export default {
  props: ['index', 'FoodsData'],
  data() {
    return {
      activeIndex: 0, // 索引下标值
      variety: [], // 菜品详情
      StepperId: 0, // 步进器选择id
      VarietyBuy: [], // 所选菜品的详情
      testArr: []
    }
  },
  created() {
    this.variety = this.FoodsData.items
    // console.log(JSON.parse(JSON.stringify(this.variety)))
  },
  methods: {
    // 选中菜品的数量
    AddVariety(value) {
      if (this.VarietyBuy.length === 0) {
        return this.VarietyBuy.push({ id: value.id, num: value.num + 1 })
      }

      // 添加不同菜品的分类逻辑运算
      this.VarietyBuy.forEach(item => {
        if (item.id === value.id) {
          item.num++
          return
        } else {
          let res = this.VarietyBuy.some(item1 => {
            return item1.id === value.id
          })
          if (res === false) {
            this.VarietyBuy.push({ id: value.id, num: value.num + 1 })
          }
        }
      })
      console.log(this.VarietyBuy)
    },
    //  减少/删除所选菜品
    RemoveVariety(value) {}
  }
}
</script>
<script setup>
import { ref, toRefs, reactive } from 'vue'
import { TreeSelect, Stepper } from 'vant'
</script>

<style lang="less" scoped>
.FoodsData {
  .foods {
    background-color: #fff;
    margin: 10px 0;
    border-radius: 15px;
    display: flex;
    img {
      padding: 10px;
      width: 100px;
      height: 100px;
      border-radius: 15px;
    }
    .foods-info {
      display: flex;
      // height: 80%;
      flex-direction: column;
      justify-content: space-between;
      h2 {
        font-weight: bold;
      }
      span {
        display: block;
        font-size: 12px;
      }
      .foods-tag {
        display: flex;
        .van-tag {
          margin: 0 3px;
        }
      }
      padding: 10px;
    }
  }
}
</style>
